<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手表详细</title>
    <link rel="stylesheet" href="css/reset.css">
    <script type="text/javascript" src="js/winResponsive.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>
    <div class="header">
            <div class="top">
                <div class="container">
                    <div class="left">
                        <a class="skype">
                            <img src="images/header_skype.png" alt="">
                        </a>
                        <a class="email">
                            <img src="images/header_email.png" alt="">
                        </a>
                        <a class="mobile">
                            <img src="images/haeder_mobile.png" alt="">
                        </a>
                    </div>
                    <div class="right">
                            伊森官方旗舰网站欢迎您的光临
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="container">
                    <div class="logo">
                            <!-- <img src="images/logo.png" alt=""> -->
                    </div>
                    <a href="">首页</a>
                    <a href="">关羽伊森</a>
                    <a href="">产品系列</a>
                    <a href="">售后服务</a>
                    <a href="">联系伊森</a>
                </div>
            </div>
            <div class="banne">
                <img src="images/list_banne.png" alt="">
                <div class="container">
                    <ul>
                        <li></li>
                        <li class="selected"></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="title">
                <div class="container">
                    <div class="left">您的位置</div>
                    <div class="right">
                        <a href="index.html" class="first">首页</a>
                        <a href="list.html">产品系列</a>
                        <a href="">男士腕表系列</a>
                        <a href="">ZS-1000W时尚</a>
                        <a href="">风靡007</a>
                    </div>
                </div>
            </div>
    </div>
    <div class="content">
        <div class="container">
            <div class="product">
                <div class="img">
                    <img src="images/product.png" alt="">
                </div>
                <div class="desc" id="desc">
                    <p>Eason</p>
                    <p name="bg">男士腕表系列风靡007 35毫米腕表</p>
                    <p name="bg">精致枫木外壳搭配黄金调准轴</p>
                    <p name="bg">3800 CNY*</p>
                    <p name="bg">*建议零售价（含增值税）</p>
                    <p name="bg">隐藏价格</p>
                </div>
            </div>
            <div class="detail">
                <div class="left" id="detail">
                    <p>细节描述</p>
                    <p name="bg">伊森ZS1000W时尚以著名的“托爪”（Griffes）及瞩目的表盘，展现隽永恒久的迷人设计概念。</p>
                    <p name="bg">这个腕表配备香槟色表盘，3时位置设有日历窗口，并覆有耐磨损蓝宝石表镜。35毫米精钢表壳配备镌刻罗马数字的18K黄金表圈，搭配18K黄金钢表链。</p>
                    <p name="bg">这款时计搭载有精准石英机芯－－欧米茄1532机芯。</p>
                </div>
                <div class="right">
                    <div class="border">特色</div>
                    <p>日期显示试用期满</p>
                    <div class="border">技术数据</div>
                    <p>水晶镜面</p>
                    <p>圆弧形双面防反光耐磨损蓝宝石水晶</p>
                    <div class="left">
                        表壳
                        <p>精钢表壳</p>
                    </div>
                    <div class="right">尺寸
                        <p>表壳直径：35毫米</p>
                    </div>
                </div>
            </div>
            <div class="craft">
                <div class="top">工艺制作</div>
                <div class="bottom">
                    <a href="">
                        <img src="images/位图.png" alt="">
                    </a>
                    <a href="">
                        <div name="bg">精致制造</div>
                        <p name="bg">打造全新领域</p>
                        <p name="bg">F4年国际售后服务保证T防水深度100米</p>
                    </a>
                    <a href="">
                        <img src="images/位图.png" alt="">
                    </a>
                    <a href="">
                        <p class="texttop" name="bg">蓝宝石表镜</p>
                        <p name="bg">表镜内外双面反光处理</p>
                        <p name="bg">蓝宝石表背</p>
                    </a>
                    <a href="">
                        <img src="images/位图.png" alt="">
                    </a>
                    <a href="">
                        <p class="texttop" name="bg">蓝宝石表镜</p>
                        <p name="bg">表镜内外双面反光处理</p>
                        <p name="bg">蓝宝石表背</p>
                    </a>
                </div>
            </div>
            <div class="prodetail">
                <div class="title">产品细节</div>
                <div class="prodeimg">
                    <img src="images/watch3.png" alt="">
                </div>
                <div class="prodedesc">尊霸腕表秉承伊森制表理念，内部搭载品牌最先进的机械机芯，设计灵感源自彰显高级制表技艺、精准可靠的星座系列早期表款。每一枚腕表均经过一系列独立测试认证，其革命性的测试程序为腕表行业树立了全新的品质标准</div>
            </div>
            <div class="watchband">
                <div class="left">
                    <p>极具个性的表圈</p>
                    <p>环绕在表盘的凹槽表圈具有光滑的顶部凸缘，赋予尊霸腕表独一无二的外观造型，即便历经世代流传也极易辨识。精钢表款配备的凹槽表圈则采用硬质合金（碳化钨）制成。</p>
                </div>
                <div class="right">
                    <img src="images/watch4.png" alt="">
                </div>
            </div>
            <div class="other">
                <div class="title">其他系列</div>
                <!-- <div class="otherpro">
                    
                </div> -->
                <div class="left"><img src="images/left.png" alt=""></div>
                <a href=""><img src="images/watch6.png" alt=""></a>
                <a href=""><img src="images/watch6.png" alt=""></a>
                <a href=""><img src="images/watch6.png" alt=""></a>
                <a href=""><img src="images/watch6.png" alt=""></a>
                <div class="right"><img src="images/left.png" alt=""></div>
                <p>伊森“同轴•至臻天文台表”39毫米</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="options">
                <div class="definite">
                    <div class="top">伊森售后服务</div>
                    <ul>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                    </ul>
                </div>
                <div class="definite">
                    <div class="top">伊森售后服务</div>
                    <ul>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                    </ul>
                </div>
                <div class="definite">
                    <div class="top">伊森售后服务</div>
                    <ul>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌介绍</a></li>
                    </ul>
                </div>
            </div>
            <div class="info">
                <p>Copyright2016伊森腕表版权所</p>
                <p>粤ICP备1234567号</p>
                <p>贵宾专线：400-200-9999</p>
                <p>地址：广州市海珠区XX大厦1808室</p>
            </div>
        </div>
    </div>
    <script>
        var lis = document.querySelectorAll('p[name="bg"]');
        for(var i = 0;i<lis.length;i++){
            lis[i].onmousemove = function(){
                this.style.backgroundColor = 'skyblue';
            }
            if(i%2==0){
                lis[i].onmouseout = function(){
                    this.style.backgroundColor = 'pink';
                }
            }
            else{
                lis[i].onmouseout = function(){
                    this.style.backgroundColor = '';
                }
            }
            if(i%2==0){
                lis[i].style.backgroundColor = 'pink';
            }
        }
    </script>
</body>
</html>